<?php
	header('Content-type: text/html; charset=utf-8');
	session_start();	//start session
    if(!isset($_SESSION['username'])){	//check if the user data is in the session
        header("location: login.php");	//if not redirect back to user
    }
?>

<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script src="jquery-1.11.0.js"></script>
		<script src="gen.js"></script>
		<script>
			//makes a synchronous call to the page u and return the 
			//result as object
			function syncAjax(u){
				var obj=$.ajax({url:u, async:false});

				console.log(obj.responseText);

				return JSON.parse(obj.responseText); //same as $.parseJSON(obj.responseText);
				
			}

			function edit(obj,id){
				var r=getSubdistrict(id);
				if(r.result==0){
					//show error message
					$("#divStatus").text(r.message);
					return;
				}
				//get the data from object r and put it in the form
				$("#subdistrict_id").prop("value", r.subdistrict.id);
				$("#subdistrict_name").prop("value", r.subdistrict.subdistrictName);
				$("#district_id").prop("value", r.subdistrict.districtId);
				//show the form
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);
				//hide the add button
				document.getElementById("addbutton").style.display='none';
				//show the save button
				document.getElementById("savebutton").style.display='inline';

				//display the form
				$("#divEdit").fadeIn(1000);
			}

			//returns a result object for one vaccine 
			function getSubdistrict(id){

				var u="subdistrict_action.php?cmd=1&id="+id;

				console.log(u); //control check on the console
				
				return syncAjax(u);  //makes asynchronous call to the save page
			}

			
			function save(){
				//complete the url
				var id = document.getElementById("subdistrict_id").value;
				var sbdn = document.getElementById("subdistrict_name").value;
				var di = document.getElementById("district_id").value;

				var u="subdistrict_action.php?cmd=3&id=" + id + "&subd_name=" + sbdn + "&dist_id=" + di;

				console.log(u);
				
				$.getJSON(u,saveDone);

				changeStatus("changes saved!"); //changes text in the divStatus to display update

				cancel();

				reloadContent();
			}
			
			function saveDone(data){
				
				alert(data);
			}

			//hides the form
			function cancel(){
				//fade out the form in half a second
				$("#divEdit").fadeOut(500);
			}

			// function deleteCheck(obj, id){ //creates a pop up to allow users to verify delete action

			// 	var y=event.clientY;
			// 	var x=event.clientX/1.5;

			// 	$("#divConfirm").css("top",y);
			// 	$("#divConfirm").css("left",x);

			// 	$("#divConfirm").fadeIn(1000);

			// 	if (document.getElementById("yesButton").onclicked==true){

			// 		console.log("yes...delete the stuff")
			// 		deleteSbd(obj, id);
			// 	}
				
			// }

			function deleteSbd(obj, id){

				var u = "subdistrict_action.php?cmd=4&id=" + id;

				console.log(u);

				$.getJSON(u,saveDone);

				changeStatus("subdistrict deleted!"); //changes text in the divStatus to display update

				reloadContent();
			}

			function display_subdistrict(obj, id){ //displays the details of a selescted subdistrict
				var r=getSubdistrict(id);
				if(r.result==0){
					//show error message
					$("#divStatus").text(r.message);
					return;
				}

				//makes text boxes readdonly for viewing only!
				$("#subdistrict_name").attr('readonly','readonly');
				$("#district_id").attr('readonly','readonly');

				//hide the save button
				document.getElementById("savebutton").style.display='none';
				//hide the add button
				document.getElementById("addbutton").style.display='none';

				$("#subdistrict_name").prop("value", r.subdistrict.subdistrictName);
				$("#district_id").prop("value", r.subdistrict.districtId);


				var y=event.clientY;
				var x=event.clientX*1.5;

				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);

				$("#divEdit").fadeIn(1000);

			}

			function add_new(){

				var y=event.clientY;
				var x=event.clientX/2;

				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);

				//show hide the save button
				document.getElementById("savebutton").style.display='none';
				//how the add button
				document.getElementById("addbutton").style.display='inline';

				$("#divEdit").fadeIn(1000);
			}

			function add(){

				var sbdn = document.getElementById("subdistrict_name").value;
				var di = document.getElementById("district_id").value;

				var u = "subdistrict_action.php?cmd=5&subd_name=" + sbdn + "&dist_id=" + di;

				console.log(u);

				$.getJSON(u,saveDone);

				reloadContent();

				changeStatus("New subdistrict added!"); //changes text in the divStatus to display update

				cancel(); //fade out the pop-up box

			}

			function reloadContent(){

				//prooves in the concolse that the funtion is being called
				console.log("relaoding page function");

				//relaods the information displayed in divContent
				$("#divContent").load("subdistrict_list.php #divContent");
			}

			function changeStatus(message){

				//update status with message parameter
				$("divStatus").text(message); 
			}

		</script>
	</head>
	<body>
		<table id="contentTable">
			<tr>
				<td colspan="2" id="pageheader">
					health information system
				</td>
			</tr>
			<tr>
				<td id="mainnav">
					<div class="menuitem"><a href="Home.php">location</a></div>
					<div class="menuitem">opd cases</div>
					<div class="menuitem">health promotion</div>
					<div class="menuitem">nutrition</div>
					<div class="menuitem">child welfare</div>
					<div class="menuitem">family planning</div>
					<div class="menuitem"><a href="userslist.php">users</a></div>
					<div class="menuitem"><a href="logout.php">logout<a></div>
				</td>
				<td id="content">
					<div id="divPageMenu">
						<span class="menuitem" >Community Health Officer</span> | 
						<span class="menuitem" >Districts</span> | 
						<span class="menuitem" ><a href="subdistrict_list.php">Sub districts</a></span> | 
						<span class="menuitem" ><a href="community_lists.php">Communities<a/></span>
						<!-- <input type="text" id="txtSearch">
						<span class="menuitem">search</span> -->
						<form>
							<input type="text" placeholder="Search Subdistricts" id="txtSearch" name="subdistrict_name">
							<span class="menuitem"><input type="submit" value="search"></span>
						</form>
					</div>
					<div id="divStatus" class="status">
						
					</div>
					<div id="divContent">
						Subdistricts
						<div id = 'addNew' class='hotspot' onclick="add_new()">Add new Subdistrict</div>
						<table class="reportTable" width="100%" >
							<tr class="header" >
								<td>ID</td>
								<td>Vaccine Name</td>
								<td></td>
								<td></td>
							</tr>
<?php	
	include("subdistrict_table_functions.php");

	$obj=new subdistrict();

	if(isset($_REQUEST['subdistrict_name'])){
		$subdistrictname = $_REQUEST['subdistrict_name'];
		
		if (!$obj->search($subdistrictname)){
			echo "error";
			exit();
		}
	}else{
		if(!$obj->list_all()){
			echo "error";
			exit();
		}
	}

	
	
	$row=$obj->fetch();
	$row_counter=0;
	while($row){
		
		if($row_counter%2==0){
			$style=" class='row1' ";
		}else{
			$style=" class='row2'  ";
		}	
		$id=$row['subdistrict_id'];
		echo "<tr $style >";
			echo "<td>$id</td>";
			echo "<td><span class='hotspot' onclick='display_subdistrict(this,$id)'>$row[subdistrict_name]</a></td>";
			echo "<td><span class='hotspot' onclick='edit(this,$id)'>edit</span></td>";
			echo "<td><span class='hotspot' onclick='deleteSbd(this,$id)'>delete</span></td>";
		echo "</tr>";
		$row=$obj->fetch();
		$row_counter++;
	}
?>
						</table>
					</div>
				</td>
			</tr>
		</table>
	<div id="divEdit" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">Subdistrict Name: </td>
						<td class="field">
							<input type="text" value="" id="subdistrict_name" >
						</td>
					</tr>
					<tr>
						<td class="label">District Id:</td> 
						<td class="field">
							<input type="text" value="" id="district_id">
						</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="save()" id = "savebutton" >
							<input type="button" value="cancel" onclick="cancel()" id = "" >
							<!--<a href=""><input type="button" value="view communities in this subdistrict"> redirects to a page displaying list of communities under subdistrict-->
							<input type="button" value="add subdistrict" onclick="add()" id="addbutton" >
						</td>
					</tr>
					<input type="hidden" value="" id="subdistrict_id">
		</table>
		<!-- validation popup div -->
		<div id="divConfirm"> 
			DO you really want to delete?
			<p><input type="button" value="yes" id= "yesButton" ></p>
		</div>
	</div>
	</body>
</html>	